<template>
  <view class="container">
    <uv-navbar bgColor="#104682" placeholder>
      <template v-slot:left>
        <image @click="open" class="slide_icon" src="../../static/images/slide.png" mode=""></image>
      </template>
      <template v-slot:center>
        <image class="logo_icon" src="../../static/images/logo.png" mode=""></image>
      </template>
      <template v-slot:right>
        <view class="uv-nav-slot" @click="openPicker">
          <image class="lang_icon" src="../../static/images/lang.png" mode=""></image>
          <view class="lang_label">{{$i18n.t('lang')}}</view>
          <image class="arrow_icon" src="../../static/images/arrow.png" mode=""></image>
        </view>
      </template>
    </uv-navbar>
    <uv-picker ref="picker" :columns="columns" @confirm="confirm" keyName="label"></uv-picker>
  </view>
</template>

<script>
  export default {
    name: "navbar",
    data() {
      return {
        columns: [
          [{
              label: "中文简体",
              value: "zh"
            },
            {
              label: "English",
              value: "en"
            }
          ]
        ]
      };
    },
    onLoad() {
      
    },
    methods: {
      open() {
        this.$emit("openleft");
      },
      openPicker() {
        this.$refs.picker.open();
      },
      // 选择语言
      confirm(e) {
        console.log("选择了什么语言", e);
        this.$i18n.setLocale(e.value[0].value);
        this.langLabel = e.value[0].label;
        this.$forceUpdate(); // 强制更新视图
        uni.setStorageSync("locale", e.value[0].value);
        uni.setLocale(e.value[0].value);
        window.location.reload();
      },
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    .slide_icon {
      width: 48rpx;
      height: 48rpx;
    }

    .logo_icon {
      width: 272rpx;
      height: 56rpx;
    }

    .uv-nav-slot {
      display: flex;
      align-items: center;

      .lang_icon {
        width: 44rpx;
        height: 44rpx;
      }

      .lang_label {
        font-weight: 600;
        font-size: 28rpx;
        color: #FFFFFF;
        margin: 0 8rpx;
      }

      .arrow_icon {
        width: 20rpx;
        height: 20rpx;
      }
    }
  }
</style>